import 'package:flutter/material.dart';

class ContainerPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Scaffold(
        body: new Center(
      child: new Container(
        //是一个结合了绘制（painting）、定位（positioning）以及尺寸（sizing）widget的widget。
        /*
          Container的组成如下：
          最里层的是child元素；
          child元素首先会被padding包着；
          然后添加额外的constraints限制；
          最后添加margin。
          * */
        /*
          * Container自身尺寸的调节分两种情况：
            1、Container在没有子节点（children）的时候，会试图去变得足够大。除非constraints是unbounded限制，在这种情况下，Container会试图去变得足够小。
            2、带子节点的Container，会根据子节点尺寸调节自身尺寸，但是Container构造器中如果包含了width、height以及constraints，则会按照构造器中的参数来进行尺寸的调节。
          * */
        /*
          * Key key,
            this.alignment,控制child的对齐方式，如果container或者container父节点尺寸大于child的尺寸，这个属性设置会起作用，有很多种对齐方式。
            this.padding,decoration内部的空白区域，如果有child的话，child位于padding内部。padding与margin的不同之处在于，padding是包含在content内，而margin则是外部边界，设置点击事件的话，padding区域会响应，而margin区域不会响应。
            Color color,用来设置container背景色，如果foregroundDecoration设置的话，可能会遮盖color效果。
            Decoration decoration, decoration：绘制在child后面（其实是在前面，color才是在后面）的装饰，设置了decoration的话，就不能设置color属性，否则会报错，此时应该在decoration中进行颜色的设置。
            this.foregroundDecoration,绘制在child前面的装饰。
            double width,container的宽度，设置为double.infinity可以强制在宽度上撑满，不设置，则根据child和父节点两者一起布局。
            double height,container的高度，设置为double.infinity可以强制在高度上撑满。
            BoxConstraints constraints,添加到child上额外的约束条件。
            this.margin,围绕在decoration和child之外的空白区域，不属于内容区域。
            this.transform,设置container的变换矩阵，类型为Matrix4。
            this.child,container中的内容widget。
          * */
//        color: Colors.blue,
        alignment: Alignment.bottomLeft,
        margin: EdgeInsets.fromLTRB(15, 0, 15, 0),
        height: 50,
        width: double.infinity,
        child: new Center(
          child: new Text(
            "ContainerPage",
            textAlign: TextAlign.center,
            style: new TextStyle(
              color: Colors.black,
            ),
          ),
        ),
        decoration: BoxDecoration(
            color: Colors.blue,
            borderRadius: new BorderRadius.circular(10),
            border: new Border(
              top: BorderSide(
                  color: Colors.amber, width: 0.8, style: BorderStyle.solid),
              left: BorderSide(
                  color: Colors.amber, width: 0.8, style: BorderStyle.solid),
              bottom: BorderSide(
                  color: Colors.amber, width: 0.8, style: BorderStyle.solid),
              right: BorderSide(
                  color: Colors.amber, width: 0.8, style: BorderStyle.solid),
            )),
      ),
//          new Container(
//            decoration: new BoxDecoration(
////              border: new Border.all(width: 2.0, color: Colors.red),
//              border: new Border(
//                  top: BorderSide(
//                      color:  Colors.amber,
//                      width: 0.8,
//                      style: BorderStyle.solid
//                  ),
//                left: BorderSide(
//                    color:  Colors.amber,
//                    width: 0.8,
//                    style: BorderStyle.solid
//                ),
//                bottom: BorderSide(
//                    color:  Colors.amber,
//                    width: 0.8,
//                    style: BorderStyle.solid
//                ),
//                right: BorderSide(
//                    color:  Colors.amber,
//                    width: 0.8,
//                    style: BorderStyle.solid
//                ),
//              ),
//
//              color: Colors.blue,
//              borderRadius: new BorderRadius.all(new Radius.circular(20.0)),
//            ),
//            width: double.infinity,
//            height: 50,
//            margin: const EdgeInsets.fromLTRB(15, 0, 15, 0),
//            padding: const EdgeInsets.all(8.0),
//            alignment: Alignment.center,
//            child: new Text('Hello World',
//                style: Theme.of(context).textTheme.display1.copyWith(color: Colors.black)),
//          transform: new Matrix4.rotationZ(0.3),
    ));
  }
}
